<!-- 作者 -->
<script setup lang="ts">
import { getAuthor } from '@/api/getAxios'
import { ref } from 'vue';

const authorId = defineProps({
    authorId: String
})
const data = ref()
getAuthor(<string>authorId.authorId).then((res) => {
    data.value = res.data.data
})
</script>
<template>
    <div class="content" v-if="data"
        @click="$router.push({ path: '/AuthorPage/AuthorFormate', query: { uid: data.authorId } })">
        <p><img v-if="data.faceUrl" :src="data.faceUrl" alt=""><img v-else src="../assets/img/icons8-头像-96.png" alt=""></p>
        <div>
            <p>{{ data.authorName }}</p>
            <p>主要作品：《{{ data.storyList[0].name }}》</p>
        </div>
    </div>
</template>

<style scoped lang='less'>
.content {
    display: flex;
    margin-top: 20px;
    background-color: var(--bg);
    border-radius: 8px;
    padding: 10px;

    &:active {
        background-color: whitesmoke;
    }

    >p:nth-child(1) {
        width: 46px;
        height: 46px;
        overflow: hidden;
        border-radius: 50%;

        img {
            width: 100%;
            border-radius: 50%;
        }
    }

    >div {
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: .9rem;
        position: relative;

        &::after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            width: 20px;
            height: 20px;
            background: url("../assets/返回.png") no-repeat;
            background-size: contain;
            transform: rotate(180deg);
        }
    }
}
</style>